<template>
    <div class="index">
        <div class="left">
            <h2>{{travelName}}</h2>
            <el-menu
                router
                active-text-color="#ffd04b"
                background-color="#142234"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
            >
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><User /></el-icon>
                    <span>账户管理</span>
                </template>
                <el-menu-item-group title="Group One">
                    <el-menu-item index="/role">角色管理</el-menu-item>
                    <el-menu-item index="/user">用户管理</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="2">
                <template #title>
                    <el-icon><HomeFilled /></el-icon>
                    <span>客房管理</span>
                </template>
                <el-menu-item-group title="Group One">
                    <el-menu-item index="/roomtype">房型管理</el-menu-item>
                    <el-menu-item index="/room">房间管理</el-menu-item>
                </el-menu-item-group>

            </el-sub-menu>

            <el-sub-menu index="3">
                <template #title>
                    <el-icon><Camera /></el-icon>
                    <span>客户管理</span>
                </template>
                <el-menu-item-group title="Group One">
                    <el-menu-item index="/custom">入住用户</el-menu-item>
                    <el-menu-item index="/order">预定管理</el-menu-item>
                    <el-menu-item index="/assess">评价管理</el-menu-item>
                </el-menu-item-group>

            </el-sub-menu>

            <el-menu-item index="/facility">
                <el-icon><Setting /></el-icon>
                <span>设施管理</span>
            </el-menu-item>

            </el-menu>
        </div>
        <div class="right">
            <div class="top">
                <el-menu
                    router
                    :ellipsis="false"
                    mode="horizontal"
                    background-color="#142234"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                >
                <el-menu-item index="/index">
                    <el-icon><HomeFilled /></el-icon>
                    首页
                </el-menu-item>
                <el-menu-item index="/mail">
                    <el-icon><Message /></el-icon>

                    邮件
                </el-menu-item>
                <el-menu-item index="/message">
                    <el-icon><ChatSquare /></el-icon>
                    消息
                </el-menu-item>
                <el-sub-menu index="">
                    <template #title>
                        <el-icon><User /></el-icon>
                        {{userStore.user.username}}
                    </template>
                    <el-menu-item index="/mine">个人中心</el-menu-item>
                    <el-menu-item index="/setpwd">修改密码</el-menu-item>
                    <el-menu-item index="" @click="exit">退出系统</el-menu-item>
                </el-sub-menu>
                </el-menu>
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { User,HomeFilled, Setting,Camera,Message,ChatSquare } from "@element-plus/icons-vue";
import userUser from "../../store/user.ts";
import { useRouter } from "vue-router";
import { $travelName} from "../../api/travelAdmin";
import { ref,onMounted } from "vue";
import { ElMessageBox, ElNotification } from 'element-plus'
let userStore = userUser()

let router = useRouter()
onMounted(()=>{
    if(!userStore.user.username){
        router.push('/')
    }
})
const custom= () =>{
    router.push('/Custom')
}
// 退出系统
let exit = ()=>{
    ElMessageBox.confirm(
        '确定退出系统吗？',
        '系统提示',
        {
            cancelButtonText:'取消',
            confirmButtonText:'确定',
            type:'warning'
        }
    )
    .then(()=>{
        userStore.clearUser()
        router.push('/')
    })
    .catch(()=>{

    })

}
const travelName = ref('');

const loadTravelName= async () => {
  try {
    const ret = await $travelName();
    if (ret) {
      if (ret.code === 2001) {
        travelName.value = ret.data;
      }else{
        ElNotification({
            title: '通知',
            message: '服务器异常，请联系管理员！',
            type: 'error',
        });
      }
    }
  } catch (error) {
    console.error('Failed to fetch hotel names:', error);
  }
};

onMounted(()=>{
    loadTravelName()
});

</script>

<style scoped lang="scss">
    .index{
        width: 100vw;
        height: 100vh;
        display: flex;
        .left{
            width: 200px;
            background-color: #142234;
            color: white;
            .el-menu{
                border-right: none;
            }
            h2{
                font-size: 16px;
                font-family: gong;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }
        }
        .right{
            flex: 1;
            display: flex;
            flex-direction: column;
            .top{
                height: 60px;
                background-color: #142234;
                color: white;
                display: flex;
                justify-content: flex-end;
                .el-menu{
                    border-bottom: none;
                }
            }
            .content{
                flex: 1;
                padding: 5px;
            }
        }
    }

</style>
